<template>
    <div class="container">
      <div class="header">
        <h1>记账软件</h1>
      </div>
      <div class="total clearfix">
        <div class="income leftfix">{{ a }}</div>
        <div class="outcome leftfix">outcome</div>
      </div>
      <div class="show">
        <div class="demo-date-picker clearfix">
          <div class="leftfix clearfix">类型：
            <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class=" clearfix">时间：
            <el-date-picker v-model="value1" type="daterange" range-separator="To" start-placeholder="Start date"
              end-placeholder="End date" :size="size" />
          </div>
          <el-button type="primary" :icon="Search" @click="GetAllCount">Search</el-button>
        </div>
  
  
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="id" width="180" />
          <el-table-column prop="amount" label="amount" width="180" />
          <el-table-column prop="date" label="date" />
          <el-table-column prop="category" label="category" />
          <el-table-column prop="reason" label="reason" />
        </el-table>
        <div class="test">
          <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>
  
  
      </div>
    </div>
  </template>
  <script lang="ts" setup>
  import { ref } from "vue";
  import { Search } from '@element-plus/icons-vue'
  let a = ref(10)
  
  const size = ref<'default' | 'large' | 'small'>('default')
  
  const value1 = ref('')
  const value2 = ref('')
  
  const shortcuts = [
    {
      text: 'Last week',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
      },
    },
    {
      text: 'Last month',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
      },
    },
    {
      text: 'Last 3 months',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        return [start, end]
      },
    },
  ]
  const value = ref('')
  
  const options = [
    {
      value: '收入',
      label: '收入',
    },
    {
      value: '支出',
      label: '支出',
    },
   function GetAllCount(){
    console.log(1)
   }
  ]
  </script>
  <style>
  /* 清除所有元素的默认样式 */
  * {
    margin: 0;
    padding: 0;
  }
  
  /* 设置左浮动 */
  .leftfix {
    float: left;
  }
  
  /* 设置右浮动 */
  .rightfix {
    float: right;
  }
  
  /* 清除浮动的影响 */
  .clearfix::after {
    content: '';
    display: block;
    clear: both;
  }
  
  .container {
    /* 设置最外面大容器的宽度 */
    width: 980px;
    /* height: 200px;
    background-color: gray; */
    /* 设置最外面大容器水平居中，高度由内容撑开 */
    margin: auto;
    /* 设置所有文字水平居中 */
    text-align: center;
  }
  
  .header {
    background-color: #ccc;
    color: green;
  }
  
  .income,
  .outcome {
    border: 1px solid black;
    width: 478px;
    height: 100px;
    line-height: 100px;
  }
  
  .income {
    margin-right: 20px;
  }
  
  .total {
    margin-top: 10px;
  }
  
  .show {
    width: 980px;
    border: 1px solid black;
    margin-top: 10px;
    height: 520px;
    /* line-height: 500px; */
  }
  
  .test {
    display: flex;
    justify-content: center;
  }
  
  .demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    border: 1px black solid;
  }
  
  .demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
  }
  
  .demo-date-picker .block:last-child {
    border-right: none;
  }
  
  .demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }
  </style>
  